<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>注册</title>
  <link rel="stylesheet" href="__STATIC__/my/css/style.css">
  <link rel="stylesheet" href="__STATIC__/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

  <link rel="stylesheet" href="__STATIC__/dist/plugins/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="__STATIC__/dist/plugins/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="__STATIC__/dist/plugins/ionicons/css/ionicons.min.css">
  <link rel="stylesheet" href="__STATIC__/dist/plugins/adminLTE/css/AdminLTE.css">
  <link rel="stylesheet" href="__STATIC__/dist/plugins/iCheck/square/blue.css">
</head>
<body>
<div class="materialContainer">
  <div class="box">
    <form id="registerForm" method="post">
      <div class="form-group has-feedback">
        <input id="name" name="name" type="text" class="form-control" placeholder="用户名">
        <input id="class" name="class" type="hidden" value="U" >
        <span class="glyphicon glyphicon-user form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input name="email" type="email" class="form-control" placeholder="Email">
        <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input name="mobile" type="text" class="form-control" placeholder="电话">
        <span class="glyphicon glyphicon-earphone form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input name="pwd" id="pwd" type="password" class="form-control" placeholder="密码(6-10位字母和数字组合密码)">
        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="password" name="checkPwd" id="checkPwd" class="form-control" placeholder="确认密码">
        <span class="glyphicon glyphicon-log-in form-control-feedback"></span>
        <span id="checkPwdMsg" style="color: rgba(168,15,24,0.6)"></span>
      </div>
      <div class="form-group has-feedback" style="text-align: center;">
        <label for="sel3" class="form-label" style="margin-right: 10px">所属地区：</label>
        <select name="rID" style="width: 50%;height: 30px;border: 1px solid #db4c4c">
          {volist name="regionList" id="item"}
          <option value="{$item.rID}">{$item.name}</option>
          {/volist}
        </select>
      </div>
      <div class="button login">
        <button onclick="login()">
          <span>返回登录</span>
          <i class="fa fa-check"></i>
        </button>
      </div>
      <div class="button login">
        <button type="submit">
          <span>注册</span>
          <i class="fa fa-check"></i>
        </button>
      </div>
    </form>

  </div>

</div>
<!--<a href="{:url('message_board/index/reg')}">注册</a>-->
</body>
<!-- 引入js依赖 -->
{include file="public/introduce" /}
<script>
  function login(){
    var e = document.getElementById('registerForm');
    e.action = "{:url('userLogin')}";
    e.submit();
  }


  /* 表单字段验证 */
  $('#registerForm').bootstrapValidator({
    excluded: [":disabled", ":hidden", ":not(:visible)"], //不验证的情况
    message: '表单校验',
    /**
     * 生效规则（三选一）
     * enabled 字段值有变化就触发验证
     * disabled,submitted 当点击提交时验证并展示错误信息
     */
    live: 'enabled',
    /* button type为submit时无需额外绑定 */
    //验证字段以及规则
    fields: {

      name: {
        trigger: "change",
        validators: {
          notEmpty: {
            message: '用户名不能为空'
          },
          remote: {
            type: "post",
            url: "../user/getName",
            data: function (validator){
              return {name: $('#name').val()}
            },
            delay:  800,//延迟发送请求（默认输入一个字符，提交一次，服务器压力太大）
            message: "已有用户名"
          }
        }
      },
      email: {
        trigger: "change",
        verbose: false,
        validators: {
          notEmpty: {
            message: 'email不能为空'
          },
          emailAddress: {
            message: '邮箱地址格式有误'
          },
        }
      },
      mobile: {
        trigger: "change",
        validators: {
          notEmpty: {
            message: 'mobile不能为空'
          },
          regexp: {  //正则验证
            regexp: /^1\d{10}$/,
            message: '请输入正确的电话号'
          }
        }
      },
      pwd: {
        trigger: "change",
        validators: {
          notEmpty: {
            message: '密码不能为空'
          },
          stringLength: {
            min: 6,
            max: 10,
            message: "密码长度须在6-10之间"
          },
          regexp : {
            regexp : /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]/,
            message : '密码由字母和数字组成，不能是纯数字或纯英⽂！'
          }
        },
      },
      checkPwd: {
        validators : {
          notEmpty : {
            message : '请再次输入新密码！',
            equalTo : "#pwd"
          },
          identical : {
            field : 'pwd',
            message : '两次填写的密码不一致！'
          }

        }
      },

    }
  }).on("success.form.bv",function (e){ //验证成功后提交表单
    $.ajax({
      url: "../user/do_register",
      type: "post",
      async: false,
      data: $('#registerForm').serialize(),
      success: function (result){
        if (result.success){
          alert("注册成功！请返回登录界面进行登录！");
        }
      }
    });
  });


</script>
</html>